<template>
  <a-table
    :columns="columns"
    :data="datalist"
    :pagination="{
      showTotal: total,
      pageSize: searchParams.pageSize,
      current: searchParams.current,
      total,
    }"
    @change="onPageChange"
  />
</template>

<script setup lang="ts">
import { onMounted, ref, watchEffect } from "vue";
import {
  UserScoreControllerService,
  UserScoreQueryRequest,
} from "../../../generated";
import { useRoute } from "vue-router";
import message from "@arco-design/web-vue/es/message";

const searchParams = ref<UserScoreQueryRequest>({
  examId: -1,
  pageSize: 10,
  current: 1,
});

const datalist = ref([]);
const total = ref(0);

const onPageChange = (page: number) => {
  searchParams.value = {
    ...searchParams.value,
    current: page,
  };
};

const route = useRoute();
const loadData = async () => {
  const id = route.query.examId;
  if (!id) return;
  searchParams.value.examId = Number(id);
  searchParams.value.sortField = "score";
  searchParams.value.sortOrder = "ascend";
  const res = await UserScoreControllerService.listTotalScoreByPageUsingPost(
    searchParams.value
  );
  if (res.code === 0) {
    datalist.value = res.data.records;
    total.value = res.data.total;
  } else {
    message.error("加载失败" + res.message);
  }
};

/**
 * 监听 searchParams 变量，改变时触发页面的重新加载
 */
watchEffect(() => {
  loadData();
});

/**
 * 页面加载时，请求数据
 */
onMounted(() => {
  loadData();
});

const columns = [
  {
    title: "用户ID",
    dataIndex: "userId",
  },
  {
    title: "用户名",
    dataIndex: "userName",
  },
  {
    title: "总分",
    dataIndex: "totalScore",
  },
];
</script>

<style scoped></style>
